import React,{useState,useEffect} from "react";
import "./My.css";
import {
  RightOutline,
  UnorderedListOutline,
  EnvironmentOutline,
} from "antd-mobile-icons";
import { List, Button, Dialog, Toast, Divider,Popup } from "antd-mobile";
import { Cell } from "@nutui/nutui-react";
import { ArrowRight, User } from "@nutui/icons-react";
import { useNavigate } from "react-router-dom";
import axios from "axios"


export default function My() {
  const navigate = useNavigate();
  const [visible1, setVisible1] = useState(false)
  const [visible3, setVisible3] = useState(false)
  let [user, setUser] = useState({});

  let getuser = async () => {
    let res = await axios.post("/linmr/user", {
      id: localStorage.getItem("userId"),
    });
    setUser(res.data.data);
    console.log(res.data.data);
  };
  useEffect(() => {
    getuser();
  }, []);

  return (
    <div style={{ backgroundColor: "rgb(244, 248, 255)", height: "100vh" }}>
      <div className="mytop">
        <div onClick={()=>{navigate('/ziliao')}} className="mynr">
          <img 
            src={user.img}
            alt=""
          />
          <div>
            <p>{user.name}</p>
            <p>{`${user.phone?user.phone.slice(0, 3):''}****${user.phone?user.phone.slice(7, 11):''}`}</p>
          </div>
        </div>
        <RightOutline
          style={{ marginTop: "80px", marginRight: "30px", color: "white" }}
        />
      </div>
      <div className="mydingd">
        <List.Item onClick={() => {navigate("/mydingd")}} arrow>
          <span
            style={{
              display: "inline-block",
              width: "5px",
              height: "20px",
              backgroundColor: "rgb(153, 204, 51)",
              marginRight: 10,
            }}
          ></span>
          我的订单
        </List.Item>
        <hr />
        <div className="mydingd1">
          <div onClick={()=>{navigate("/daifukuan")}}>
            <img src="/1.png" alt="" />
            <p>待付款</p>
          </div>
          <div onClick={()=>{navigate("/daifahuo")}}>
            <img src="/2.png" alt="" />
            <p>待收货</p>
          </div>
          <div onClick={()=>{navigate("/yiwancheng")}}> 
            <img src="/3.png" alt="" /> 
            <p>已完成</p>
          </div>
          <div onClick={()=>{navigate("/pingjia")}}>
            <img src="/4.png" alt="" />
            <p>待评价</p>
          </div>
        </div>

        <div className="mydingd2" style={{ marginTop: "30px" }}>
          <Cell.Group>
            <Cell
              title={
                <div onClick={()=>{navigate("/address")}} style={{ display: "flex", alignItems: "center" }}>
                  <img
                    src="/5.png"
                    style={{ width: "2rem", height:"2.2rem", marginRight: "5px" }}
                    alt=""
                  />
                  我的地址
                </div>
              }
              extra={<ArrowRight style={{ marginTop: "10px" }} />}
            />
            <Cell
              title={
                <div onClick={()=>{navigate("/myshoucang")}} style={{ display: "flex", alignItems: "center" }}>
                  <img
                    src="/6.png"
                    style={{ width: "2rem", height:"2.2rem",marginRight: "5px"  }}
                    alt=""
                  />
                  我的收藏
                </div>
              }
              extra={<ArrowRight style={{ marginTop: "10px" }} />}
            />
            <Cell
              title={
                <div style={{ display: "flex", alignItems: "center" }}>
                  <img
                    src="/7.png"
                    style={{ width: "2rem", height:"2.2rem", marginRight: "5px" }}
                    alt=""
                  />
                  联系客服
                </div>
              }
              extra={<ArrowRight style={{ marginTop: "10px" }} />}
            />
            <Cell
              title={
                <div onClick={()=>{navigate("/yijian")}} style={{ display: "flex", alignItems: "center" }}>
                  <img
                    src="/8.png"
                    style={{ width: "2rem", height:"2.2rem", marginRight: "5px" }}
                    alt=""
                  />
                  意见反馈
                </div>
              }
              extra={<ArrowRight style={{ marginTop: "10px" }} />}
            />
          </Cell.Group>
        </div>
        <div className="myphoto">
          <img src="/9.png" alt="" />
        </div>
        <div
          className="mytc"
          block
          onClick={() =>
            Dialog.confirm({
              content: "确定要离开我吗",
              onConfirm: async () => {
                await sleep(3000);
                Toast.show({
                  icon: "success",
                  content: "提交成功",
                  position: "bottom",
                });
              },
            })
          }
        >
          退出
        </div>
      </div>
     
    </div>
  );
}
